{extend name="base"/}
{block name="resources"}
<style>
	.ns-purchase-page{display: flex;width: 615px;margin: 35px auto;color: #333;}
	.ns-purchase-page .purchase-img{display: flex;justify-content: center;align-items: center;width: 85px;height: 85px;margin-right: 20px;}
	.ns-purchase-page .purchase-img img{max-width: 100%;max-height: 100%;}
	.ns-purchase-page .purchase-content{flex: 1;}
	.ns-purchase-page .purchas-title{font-size: 18px;color: #323233;line-height: 24px;margin-right: 8px;margin-bottom: 8px;}
	.ns-purchase-page .purchas-desc{color: #969799;line-height: 20px;margin-bottom: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
	.ns-purchase-page .purchas-price span:nth-of-type(2){}
	.ns-purchase-page .purchas-period, .ns-purchase-page .purchas-shop{
		margin-top: 20px;
	}
	.ns-purchase-page .purchas-period .period-title, .ns-purchase-page .purchas-shop .shop-title{
		font-size: 16px;
	}
	.ns-purchase-page .purchas-period .period-content{
		display: flex;
		margin-top: 10px;
	}
	.ns-purchase-page .purchas-period .period-content li{
		width: 122px;
		height: 36px;
		line-height: 36px;
		text-align: center;
		border: 1px solid #e5e5e5;
		cursor: pointer;
	}
	.ns-purchase-page .purchas-period .period-content li + li{
		margin-left: 5px;
	}
	.ns-purchase-page .purchas-shop .shop-content{
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		padding: 20px;
		border: 1px solid #e5e5e5;
		box-sizing: border-box;
	}
	.ns-purchase-page .purchas-shop .shop-content input{
		padding-left: 10px;
		border: 1px solid #e5e5e5;
		height: 30px;
		line-height: 30px;
		width: 80px;
	}
	.ns-purchase-page .purchas-shop .shop-content-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 35px;
	}
	.ns-purchase-page .purchas-shop .shop-content-between .content{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 125px;
	}

	.ns-purchase-page .purchas-shop .shop-content-between .content span{
		display: inline-block;
		width: 80px;
		text-align: center;
	}
	.ns-purchase-page .purchas-shop .shop-content-state{
		margin-top: 10px;
		color: #9f9fa1;
	}
	.detail-operation{
		margin-top: 50px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.detail-operation .total{
		margin-right: 10px;
	}
	.detail-operation .total span{
		font-size: 18px;
	}
	.ns-purchase-page .ns-item-block-parent{padding:20px 0;}
</style>
{/block}
{block name="main"}
<div class="ns-purchase-page layui-form">
	<div class="purchase-img">
		<img src="{:img($info.image)}" onerror=src="HOME_IMG/shop.png" />
	</div>
	<div class="purchase-content">
		<h2 class="purchas-title">{$info.group_name}</h2>
		<p class="purchas-desc">{$info.desc ?: '暂无描述'}</p>
		<div class="purchas-period">
			<div class="period-title">套餐时长： <span>{$info.num}{if $info.unit == 'week'} 周 {elseif $info.unit == 'month'} 月 {elseif $info.unit == 'year'} 年 {/if}</span></div>
		</div>
		<div class="purchas-shop">
			<div class="shop-title">购买店铺数量</div>
			<div class="shop-content">
				<div class="shop-content-between">
					<span>免费店铺数</span>
					<span class="content"><span class="ns-text-color">{$info.site_num}</span>个</span>
				</div>
				<div class="shop-content-between shop-content-number">
					<span>购买店铺数</span>
					<span class="content"><input id="buy_shop_num" type="number" value="1">个</span>
				</div>
				<div class="shop-content-state">
					<span>价格说明：</span>
					{php}
					$tiered_pricing = json_decode($info['create_site_json'],true);
					{/php}
					<span>
                    {foreach $tiered_pricing as $list_k =>  $list_v}
                    {if $list_v.num == 0}店铺默认单价为{$list_v.price}元;{else/}当购买店铺数量大于等于{$list_v.num}时，店铺单价为{$list_v.price}元;{/if}
                    {/foreach}
                    </span>
				</div>
			</div>
		</div>
		<input type="hidden" name="group_id" value={$info.group_id}>


		<div class="detail-operation">
			<div class="total">
				合计：<span class="ns-red-color">￥{$tiered_pricing[0]['price']}</span>
			</div>
			<button class="layui-btn ns-bg-color submit-order">提交订单</button>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script>
	var groupId = "{$info.group_id}",
		tieredPricing ={:html_entity_decode($info['create_site_json'])},
		tieredPricingNum = [],
		tieredPricingPrice = [],
		shopPrice = 0, //店铺价格
		repeat_flag = false,
		shopNum = 1; //店铺数量

	for (var i in tieredPricing){
		tieredPricingNum.push(tieredPricing[i].num);
		tieredPricingPrice.push(tieredPricing[i].price);
	}
	
	//监听店铺数量
	$(".shop-content-number input").on("input propertychange",function(){
		shopNum = parseInt($(this).val());
		if(shopNum < 0){
			$(this).val(0);
			shopNum = 0;
			layer.msg("增加的店铺数量不能小于零");
		}
		for (var i = 0; i < tieredPricingNum.length; i++){

			if (shopNum <=  parseFloat(tieredPricingNum[i]) || i == tieredPricingNum.length - 1){
				shopPrice = shopNum ==  parseFloat(tieredPricingNum[i]) || shopNum >  parseFloat(tieredPricingNum[i]) ? parseFloat(tieredPricingPrice[i]) : parseFloat(tieredPricingPrice[i-1]);
				break;
			}
		}
		calculationTotal();
	});

	//计算合计
	function calculationTotal(){
		var total = shopNum * shopPrice;
		$(".detail-operation .total span").text("￥" + total);
	}
	
	// 提交订单
	$(".detail-operation .submit-order").click(function () {
		var buy_shop_num = $("#buy_shop_num").val();
		if (buy_shop_num <= 0) {
			layer.msg('请至少购买一个店铺', {icon: 5, anim: 6});
			return;
		}
		
		if (buy_shop_num % 1 != 0) {
			layer.msg('购买的店铺数量必须是整数', {icon: 5, anim: 6});
			return;
		}
		
		if (repeat_flag) return false;
		repeat_flag = true;

		$.ajax({
			type: 'POST',
			url: ns.url("home/ordercreate/create"),
			data: {'group_id': groupId, 'create_site_num': shopNum},
			dataType: 'JSON',
			success: function(res) {
				layer.msg(res.message);
				repeat_flag = false;

				if (res.code >= 0) {
					location.href = ns.url('home/ordercreate/confirm', {out_trade_no:res.data});
				} else {
					location.reload();
				}
			}
		});
	});
</script>
{/block}